<%--
  Created by IntelliJ IDEA.
  User: Zhj
  Date: 2024/4/5
  Time: 0:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入jstl的命名空间 标签以c开头--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/layui/js/layui.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .recycle-content{
            width: 85%;
            /*height: 800px;*/
            margin: 0 auto;
            margin-top: 30px;
            background-color: #f9f9f9;
            border-radius: 10px;
            box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
        }
        .recycle-content h1{
            padding-top: 10px;
            text-align: center;
        }
        .table {
            text-align: center;
        }

        .container {
            position: relative;
            width: 100%;
            margin: 0 auto !important;
            padding-top: 20px;
        }

        .container .table tr th {
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
        }


        /* 表格不换行，超出表格限制会自动省略 */

        .container .table tr td {
            vertical-align: middle;
            text-align: center;
            padding: 0;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .table tr:nth-child(even) {
            background-color: lightcyan;
        }

        .pagination-body .pagination {
            display: inline-block;
            margin: 0 auto;
            background-color: pink;
        }


        /* 复选框按钮样式调整 */

        .form-check-input {
            position: relative;
            margin: 0;
        }


        /* 搜索框 */

        .index-btn {
            position: absolute;
            top: 0;
            right: 0;
        }

        .index-btn a {
            text-decoration: none;
            border-radius: 5px;
        }
    </style>
</head>

<body>
<div class="recycle-content">
    <h1>回收站</h1>
    <div class="container">
        <form class="layui-form" action="" method="post">
            <div class="layui-form-item">
                <div class="layui-input-group search-input">
                    <div class="layui-input-prefix">
                        搜索
                    </div>
                    <input type="search" name="search" placeholder="请输入你需要查找的内容" class="layui-input">
                    <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
                        <i class="layui-icon layui-icon-search"></i>
                    </div>
                </div>
                <div class="layui-input-group index-btn">
                    <a href="#" class="layui-btn">回到首页</a>
                </div>
            </div>
        </form>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>选项</th>
                <th>ID</th>
                <th>标题</th>
                <th>日期</th>
                <th>类型</th>
                <th>内容</th>
                <th>删除时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${recycleList}" var="recycle">
                <tr>
                    <td>
                        <input class="form-check-input" type="checkbox">
                    </td>
                    <td>${recycle.mid}</td>
                    <td>${recycle.mtitle}</td>
                    <td>${recycle.mdate}</td>
                    <td>${recycle.mtype}</td>
                    <td>${recycle.mcontent}</td>
                        <%--                <td>${MessageTable.id}</td>--%>
                    <td>${recycle.delete_date}</td>
                    <td>
                        <a href="/RecoverMessage?mid=${recycle.mid}" class="btn">恢复</a>
                        <a href="/DeleteRecycleById?mid=${recycle.mid}" class="btn">删除</a>
                    </td>
                </tr>
            </c:forEach>
<%--            <tr>--%>
<%--                <td>--%>
<%--                    <input class="form-check-input" type="checkbox">--%>
<%--                </td>--%>
<%--                <td>20240403366</td>--%>
<%--                <td>咨询</td>--%>
<%--                <td>书法老师的房间里士fdddddddddddddddddddddddddddddd大夫精神</td>--%>
<%--                <td>Moe</td>--%>
<%--                <td>--%>
<%--                    <a href="" class="btn" disabled="disabled">恢复</a>--%>
<%--                    <a href="" class="btn" disabled="disabled">删除</a>--%>
<%--                </td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <td>--%>
<%--                    <input class="form-check-input" type="checkbox">--%>
<%--                </td>--%>
<%--                <td>20240403388</td>--%>
<%--                <td>科技</td>--%>
<%--                <td>法撒旦风口浪尖上的雷锋精神独立</td>--%>
<%--                <td>Dooley</td>--%>
<%--                <td>--%>
<%--                    <a href="" class="btn" disabled="disabled">恢复</a>--%>
<%--                    <a href="" class="btn" disabled="disabled">删除</a>--%>
<%--                </td>--%>
<%--            </tr>--%>
            </tbody>
        </table>
        <ul class="pagination justify-content-center">
            <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
        </ul>
    </div>
</div>

</body>

</html>